<template>
	<div class="content">
         
		<div class="left">
			<CommonTab :menuList="menuList" @getSelectedId="getSelectedId"></CommonTab>

			<div class="left-main">
				<div class="left-main-item" v-for="(item,i) in menuList" :key="i">
					<div class="left-main-item-title">
						<img src="../../static/image/label.png" />
						<div class="left-main-item-title-name">{{item.value}}</div>
					</div>
					<div class="left-main-all-item">
						<div class="left-main-item-box" v-for="(table,i) in item.tableList"  :key="i">
							<div class="left-main-item-box-img"
								:class="table.status=='使用'?'left-main-item-box-img-select':'left-main-item-box-img-noselect'">
								<img src="../../static/image/table.png" />
								<div>
									{{table.count}}人
								</div>
							</div>
							<div>
								{{table.name}}（{{table.status}}）
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-top">
				开台
			</div>
			<div class="right-main">
				<div class="right-main-title">桌号：一号大厅-01号桌</div>
				<div>
					<Keyboard placeholder="请输入就餐人数"></Keyboard>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				menuList: [
					//产品图片导航栏切换
					{
						id: 1,
						value: "全部",
						checked: true,
						tableList: []
					},
					{
						id: 2,
						value: "一楼",
						checked: false,
						tableList: [{
							name: "001",
							count: "2",
							status: "使用"
						}, {
							name: "002",
							count: "2",
							status: "使用"
						}, {
							name: "003",
							count: "5",
							status: "闲置"
						}, {
							name: "001",
							count: "2",
							status: "使用"
						}, {
							name: "002",
							count: "2",
							status: "使用"
						}, {
							name: "003",
							count: "5",
							status: "闲置"
						}, {
							name: "001",
							count: "2",
							status: "使用"
						}, {
							name: "002",
							count: "2",
							status: "使用"
						}, {
							name: "003",
							count: "5",
							status: "闲置"
						}]
					},
					{
						id: 3,
						value: "二楼",
						checked: false,
						tableList: [{
							name: "001",
							count: "2",
							status: "闲置"
						}, {
							name: "002",
							count: "4",
							status: "使用"
						}, {
							name: "003",
							count: "5",
							status: "闲置"
						}]
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			
			getSelectedId(id){
				console.log("id",id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 260rpx);
		display: flex;
		justify-content: space-between;

		.left {
			// width: 1584rpx;
			flex: 1;
			height: 100%;
			background-color: #FFFFFF;
			padding: 40rpx 40rpx 0 40rpx;
			border-radius: 8px;
			margin-right: 20rpx;

			
			.left-main {
				height: 950rpx;
				overflow: auto;
				margin-top: 40rpx;
				font-size: 36rpx;
				color: #001124;

				.left-main-item {
					.left-main-item-title {
						display: flex;
						font-family: PingFangSC-Medium;
						letter-spacing: 1.5rpx;
						font-weight: 600;
						padding-bottom: 40rpx;

						.left-main-item-title-name {
							padding-left: 20rpx;
						}
					}

					.left-main-all-item {
						display: flex;
						padding-left: 4rpx;
						flex-wrap: wrap;
					}

					.left-main-item-box-img-select {
						background: #60C7D0;
						color: #FFFFFF;

					}

					.left-main-item-box-img-noselect {
						border: 2rpx solid #EAEAEA;
						color: #AAAAAA;

					}

					.left-main-item-box {
						text-align: center;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 30rpx;
						margin-right: 20rpx;

						.left-main-item-box-img {

							width: 196rpx;
							height: 236rpx;
							border-radius: 12rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							font-size: 28rpx;
							font-weight: 600;
							margin-bottom: 20rpx;
							padding: 38rpx 0 28rpx 0;

							img {
								width: 142rpx;
								height: 100rpx;
								background: transparent !important;
							}
						}

					}

					// .left-main-all-item .left-main-item-box:nth-child(7n) {
					// 	margin-right: 0;
					// }

				}
			}
		}

		.right {
			height: 100%;
			width: 676rpx;
			background: #FFFFFF;
			border-radius: 6rpx;

			.right-top {
				line-height: 112rpx;
				color: #FFFFFF;
				font-weight: 600;
				text-align: center;
				border-radius: 6px 6px 0 0;
				height: 112rpx;
				width: 676rpx;
				font-size: 40rpx;
				letter-spacing: 1.66rpx;
				background: #60C7D0;

			}

			.right-main {
				font-family: PingFangSC-Medium;
				font-size: 36rpx;
				color: #001124;
				letter-spacing: 1.5rpx;
				padding: 40rpx;

				.right-main-title {
					padding-bottom: 40rpx;
					color: #001124;
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>
